import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux'
import {
  StyleSheet,
  View,
    Image,
  Text,
  TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'
import Dialog from '../../routes/DialogTip'

const ProjectItem = props => {

  const {num, title, colors, query,dialogText} = props

  return (
    <TouchableOpacity onPress={ query !== undefined ? query : () => alert('暂未开发')}>
      <View style={styles.itemsContainer}>
        <View style={[styles.projectNum, {backgroundColor: colors[0], borderColor: colors[1]}]}>
          <Text style={[styles.font, {color: colors[2]}]}>{num}</Text>
        </View>
        <Text style={styles.projectName} onPress={Actions.projectsList}>{title}</Text>
      </View>
    </TouchableOpacity>
  )
}

export class DataIntro extends Component<{}> {
  render() {
    const {queryInSup, projectsNum, role,noneReceived} = this.props
    return (
      <View style={styles.container}>
        <View style={styles.projectsContainer}>
            <TouchableOpacity style={styles.firstInside1} onPress={() =>Actions.push('taizhang')}>
              <View style={{width:180,paddingLeft:15,paddingRight:15,paddingTop:5,paddingBottom:5,flexDirection:'row',alignItems:'center',justifyContent: 'center',}}>
                  <Image source={require('../../assets/icons/taizhang.png')}
                         style={{width:25,height:25,alignItems:'center',}}/>
                  <Text style={{fontSize:18,marginLeft:10}}>台帐记录</Text>
              </View>
              <View style={{width:0.5,backgroundColor:Colors.unselectGrayBg,}}></View>
              <View style={{width:90,paddingLeft:15,paddingRight:15,paddingTop:5,paddingBottom:5,alignItems:'center',justifyContent: 'center',}}>
                <Text style={{fontSize:35,color:Colors.dataGreenOuter}}>{projectsNum.tzChangeForm}</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity style={styles.firstInside} onPress={() =>Actions.push('TaskCenter')}>
              <View style={{width:180,paddingLeft:15,paddingRight:15,paddingTop:5,paddingBottom:5,flexDirection: 'row',alignItems:'center',justifyContent: 'center',}}>
                <Image source={require('../../assets/icons/renwu1.png')}
                          style={{width:25,height:25}}/>
                <Text style={{fontSize:18,marginLeft:10}}>任务管理</Text>
              </View>
              <View style={{width:0.5,backgroundColor:Colors.unselectGrayBg,}}></View>
              <View style={{width:90,paddingLeft:15,paddingRight:15,paddingTop:5,paddingBottom:5,alignItems:'center',justifyContent: 'center',}}>
                <Text style={{fontSize:25,color:'red'}}>{noneReceived}</Text>
                <Text style={{fontSize:15,color:'red'}}>未接收</Text>
              </View>
            </TouchableOpacity>
        </View>

        <View style={styles.secondContainer}>
          <Text style={styles.title}>数据概况</Text>
          <View>
            <View style={{flexDirection: 'row',}}>
              <View style={{flex:1,flexDirection: 'row',justifyContent: 'center',alignItems:'center'}}>
                <View style={styles.secondItem}>
                  <ProjectItem
                      num={projectsNum.inProject} title={"在监项目"} query={() =>{Actions.push('projectsList')}}
                      colors={[Colors.dataBlueBg, Colors.dataBlueOuter, Colors.dataBlueNum]}/>
                </View>
                <View style={styles.secondItem}>
                  <ProjectItem
                      num={projectsNum.rectificationProject} title={"整改中项目"}
                      colors={[Colors.dataYellowBg, Colors.dataYellowOuter, Colors.dataYellowNum]}
                  />
                </View>
                <View style={styles.secondItem}>
                  <ProjectItem
                      num={projectsNum.shutdownProject} title={"停工中项目"}
                      colors={[Colors.dataRedBg, Colors.dataRedOuter, Colors.dataRedNum]}
                  />
                </View>
                <View style={styles.secondItem}>
                  <ProjectItem
                      num={'-'} title={"本月事故数"}
                      colors={[Colors.dataPurpleBg, Colors.dataPurpleOuter, Colors.dataPurpleNum]}
                  />
                </View>
                <View style={styles.secondItem}>
                  <ProjectItem
                      num={'-'} title={"本月已完成项目数"}
                      colors={[Colors.dataGreenBg, Colors.dataGreenOuter, Colors.dataGreenNum]}
                  />
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

export class TasksManage extends Component<{}> {
  render() {
      const {unresolved,notip} = this.props
    return (
      <View style={styles.container}>
        <View style={styles.thirdContainer}>
          <Text style={styles.title}>站长操作</Text>
          <View>
            <View style={{flexDirection: 'row',}}>
              <View style={{flex:1,flexDirection: 'row',justifyContent: 'center',alignItems:'center'}}>

                <TouchableOpacity style={styles.secondItem} onPress={() =>Actions.push('masterTaskList')}>
                  <View style={styles.itemsContainer}>
                    <View style={styles.thirdItem}>
                      <Image source={require('../../assets/icons/renwu.png')}
                             style={{width:50,height:50}}/>
                    </View>
                    <Text style={styles.projectName}>派发任务</Text>
                  </View>
                </TouchableOpacity>

                <TouchableOpacity style={styles.secondItem} onPress={() =>Actions.push('Examination')}>
                  <View style={styles.itemsContainer}>
                    <View style={styles.thirdItem}>
                      <Image source={require('../../assets/icons/shenhe.png')}
                             style={{width:50,height:50}}/>
                    </View>
                    <Text style={styles.projectName}>审核停工通知书 {unresolved === '' || unresolved ==0?null:
                        <Text style={styles.projectNameText}>{unresolved}</Text>}</Text>
                  </View>
                </TouchableOpacity>

                <View style={styles.secondItem}></View>

                <View style={styles.secondItem}></View>

                <View style={styles.secondItem}></View>
              </View>
            </View>
          </View>
            {
                notip?null:
                unresolved === '' || unresolved ==0?null:
                    <Dialog isShow={'true'} text={'有'+unresolved+'个停工通知书需审核'}/>

            }
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    // height: '100%',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 10,
    paddingRight: 10,
  },
  title: {
    fontSize: 20,
    marginBottom: 10,
  },
  projectsContainer: {
    flexDirection: 'row',
    paddingTop: 10,
    paddingBottom: 10,
    // paddingLeft: 20,
    // paddingRight: 20,
      backgroundColor: '#F5FCFF',
      borderRadius:4,
  },
  itemsContainer: {
    alignItems: 'center',
    marginRight: 25,
  },
  projectNum: {
    width: 90,
    height: 90,
    borderRadius: 45,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 8,
  },
  font: {
    fontSize: 32,
  },
  projectName: {
    marginTop: 8,
    fontSize: 18,
    // fontWeight: 'bold',
  },
    projectNameText: {
        marginTop: 8,
        fontSize: 18,
        color:'red'
        // fontWeight: 'bold',
    },





    firstInside:{
      // flex:4,
        borderRadius:5,
        borderColor:Colors.btnPrimaryBg,
        borderWidth:1,
        flexDirection: 'row',
        marginLeft:20,
        marginRight:20,
        // justifyContent: 'center',
    },
    firstInside1:{
        // flex:4,
        borderRadius:4,
        borderColor:Colors.dataGreenOuter,
        borderWidth:1,
        flexDirection: 'row',
        marginLeft:20,
        marginRight:20
        // justifyContent: 'center',
    },
    secondContainer: {
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        marginTop:10,
        borderRadius:4,
        backgroundColor: '#F5FCFF',
    },
    thirdContainer:{
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        // marginTop:10,
        borderRadius:4,
        backgroundColor: '#F5FCFF',
    },
    secondItem:{
        flex:1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems:'center'
    },
    thirdItem:{
        width:90,
        height:90,
        borderWidth:1,
        borderColor:Colors.unselectGrayBg,
        borderRadius:45,
        alignItems:'center',
        justifyContent: 'center',
    }
});




